<template>
    <div class="bigboximg">
        <div class="album" :style="{ 'grid-template-columns': `repeat(${cols}, 1fr)` }">
            <div class="item" :style="{ height: `${imgHeight}px` }" v-for="(item, index) in props.imgList" :key="index"
                v-slide-in="{ distance: imgAnimationStart, time: imgDuration }">
                <div class="title" v-if="item.title">{{ item.title }}</div>
                <el-image class="img" :src="item.src" fit="cover" lazy @click="goDetail(index)">
                    <template #placeholder>
                        <imgLoading></imgLoading>
                    </template>
                    <template #error>
                        <imgError></imgError>
                    </template>
                </el-image>
            </div>

        </div>
        <div class="empy" v-if="!props.imgList.length">
            <el-empty :description="text" />
        </div>
        <Loading class="more animate__animated" v-show="moreLoading"></Loading>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import imgLoading from './theme/imgLoading.vue'
import imgError from './theme/imgError.vue'
import { settingStore } from '@renderer/store/setting'
import { storeToRefs } from 'pinia'
import Loading from '@renderer/components/loading.vue'
const setting = settingStore()
const { imgDuration, imgAnimationStart } = storeToRefs(setting)
const imgHeight = ref(250)
const moreLoading = ref(false)
const cols = ref(3)
let left = 0
const props = defineProps({
    imgList: {
        type: Array as any,
        default: () => []
    },
    mobile: {
        type: Boolean,
        default: false
    },
    text: {
        type: String,
        default: '暂无结果'
    },
    column: {
        type: Number,
        default: 3
    },
    loading: {
        type: Boolean,
        default: false
    }
})
const $emits = defineEmits(['viewPicture'])
const goDetail = (index: Number) => {
    $emits('viewPicture', index)
}
const changeSize = () => {
    let width = window.innerWidth

    if (props.column > 2) {
        let column = 3
        if (props.mobile) {
            if (width <= 480) {
                column = 1
            } else if (width <= 768) {
                column = 2
            } else if (width <= 980) {
                column = 3
            } else if (width <= 1224) {
                column = 4
            } else {
                column = 5
            }
        } else {
            if (width <= 980) {
                column = 2
            } else if (width <= 1224) {
                column = 3
            } else {
                column = 4
            }
        }
        cols.value = column
    } else {
        cols.value = props.column
    }

    // 根据column计算imgHeight
    if (!props.mobile) {
        imgHeight.value = 0.55 * (width / cols.value)
    } else {
        imgHeight.value = 1.5 * (width / cols.value)
    }
}

onMounted(() => {
    // 监听窗口尺寸变化
    changeSize()
    window.addEventListener('resize', changeSize)
    watch(() => props.loading, (newVal) => {
        const more = document.querySelector('.more') as HTMLElement
        if (left == 0) {
            const album = document.querySelector('.album') as HTMLElement
            left = album.getBoundingClientRect().left / 2
        }

        more.style.left = `${left}px`
        if (newVal) {
            more.classList.remove('animate__fadeOutDown')
            moreLoading.value = true

        } else {
            more.classList.add('animate__fadeOutDown')
            setTimeout(() => {
                moreLoading.value = false
            }, 1000)
        }
    })
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', changeSize)
})
</script>

<style scoped lang="scss">
.bigboximg {
    height: 10%;
    width: 100%;
    position: relative;

    .album {
        padding: 5px;
        display: grid;
        gap: 5px;
        position: relative;

        .item {
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            transition: all 0.3s;
            box-shadow: 0.3em 0.3em 0.7em #00000015;
            transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            .title {
                width: 100%;
                color: white;
                background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
                z-index: 100;
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 1;
                padding: 2px 3px;
                font-size: 15px;
                transition: all 0.6s;
            }

            .img {
                width: 100%;
                height: 100%;
                cursor: pointer;
                transition: all 0.3s;
                user-select: none;
            }

            &:hover {
                .title {
                    opacity: 0;
                }
            }

        }
    }

    .empy {
        width: 100%;
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .more {
        position: fixed;
        bottom: 20px;
        left: 0;
    }
}
</style>